<script setup lang='ts'>
  import { reactive } from 'vue'
  import { diamond_balance, ticket_num } from '@/pinia/getter'
  import userList from './userList.vue';
  import tipsDialog from './tipsDialog.vue';
  import { getAssetsFile } from '@/utils/public'
  const action = reactive({
    tipsShow:false
  })
  const handleRecharge = ()=>{
    ( kk as any).goCommon({
      code: 100004
    });
  }
</script>

<template>
  <div class="moreBox flex-align">
    <div class="price flex-align">
      <img :src="getAssetsFile('icon2.png')">
      <div class="val">{{ diamond_balance }}</div>
      <img @click="handleRecharge" :src="getAssetsFile('icon4.png')">
    </div>
    <div class="price flex-align">
      <img :src="getAssetsFile('icon3.png')">
      <div class="val">{{ ticket_num }}</div>
      <img @click="action.tipsShow = true" :src="getAssetsFile('icon9.png')">
    </div>
    <tipsDialog v-model:dialogshow="action.tipsShow" page="h5Rule" />
    <userList />
  </div>
</template>

<style lang='scss' scoped>
  .moreBox {
    height: 20px;
    padding: 12px 16px 0;
    box-sizing: border-box;
    .price {
      img:nth-child(1) {
        width: 16px;
        height: 16px;
      }
      .val {
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        margin: 0 8px 0 2px;
      }
      img:nth-child(3) {
        width: 14px;
        height: 14px;
      }
    }
    .price:nth-child(1) {
      margin-right: 28px;
    }
  }
</style>